<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src='js/vue1.0.js'></script>
	<script type='text/javascript'>

			window.onload=function(){		
				  var vm=new Vue({
                      el:'#box',
                      data:{
              						arr:['one','two','three'],
              						json:{a:'one',b:'two'},
                          flag:true,
                      },
                      methods:{
                          add:function(){
                             // console.log(this);
                             this.arr.push('four');
                          },
                          toggle:function(){
                              this.flag=!this.flag;
                              console.log(this.flag);
                          },
                          show:function(n){
                                alert(n);
                          }
                      }
				  });

			}

	</script>
</head>
<body>
   <div id="box">
       <!-- vue 绑定时事件的两种方式 -->
       <!-- 1：  v-on:click/mouseout/nouseout -->
       <!-- 2：  @click -->
            
       <!-- <input type="button" v-on:click='add()' value="按钮"> -->
           <input type="button" @click='add()' value="按钮">
            <ul>
              <li v-for='value in arr'>
                 {{value}}
                 <input type="button" @click='show($index)'  data-index="{{$index}}" value="删除">
              </li>
              
            </ul>



            <input type="button"  value="按钮" @click='toggle()'>
            <div style="width:100px;height:100px;background: red" v-show="flag"></div>




   </div>
</body>
</html>